vue动态加载图片问题，报错Cannot find module "."

2024-02-29 05:47| 来源: 网络整理| 查看: 265

正常在标签加载图片的方式是

但是在vue中动态加载图片，直接用src是无效的，需要使用v-bind动态加载

//正确 //直接使用字符串报错，src应该是变量

但是 :src的值product.imgSrc = "../assets/product2.jpg"，图片仍然无法加载出来，需要使用require才可以。

但是，如果你这么使用require

src="../assets/product2.jpg"; imgSrc = require("../assets/product2.jpg")

还是会报错

Error: Cannot find module "." at webpackMissingModule (IndexPage.vue?d485:138) at VueComponent.eval (IndexPage.vue?d485:138)

因为require它是打包工具所需要的标识，你搞成运行时通过变量去定义的话，它就没办法打包了啊，

require里的正确的格式必须是path，可以这么写：

var src = "product2.jpg"; let imgSrc = require('../assets/'+imgUrl);

此外，你还可以使用以下方法去解决这个问题：

解决方案1：背景图的方式

解决方案3：静态图片的方式

把图片放到src同级的static目录（build/build.js文件中有一段代码是把static目录拷贝到dist/static的），比如图片放在static/a.png

【本文地址】

公司简介

联系我们